<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    @close="handleClose()"
    :showFooter="false"
    :title="getTitle"
    :width="getWidth"
    :showCancelBtn="false"
  >
    <Spin :spinning="loading">
      <StepMenuDrawer :record="rawData" />
    </Spin>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { Spin } from 'ant-design-vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { StepMenuDrawer } from '../customCom/components/Asteps';

  // import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'MenuDrawer',
    components: {
      Spin,
      BasicDrawer,
      StepMenuDrawer,
    },
    emits: ['success', 'register'],
    setup(_) {
      const loading = ref(false);

      let rawData: Recordable = ref({});
      const title = ref('');
      const width = ref('50%');
      const [registerDrawer, { setDrawerProps, closeDrawer, changeLoading }] = useDrawerInner(
        async (data) => {
          console.log(data);

          try {
            rawData.value = data;
            changeLoading(true);

            title.value = data.params.functionParams?.title;
            width.value = data.params.functionParams?.width;
            await init();
          } catch (e) {
            throw e;
          } finally {
            changeLoading(false);
          }
        },
      );

      async function init() {
        loading.value = true;
        setDrawerProps({ confirmLoading: true });

        loading.value = false;
        setDrawerProps({ confirmLoading: false });
      }

      const getTitle = computed(() => title.value || '详情');
      const getWidth = computed(() => width.value || '50%');

      function handleClose() {
        closeDrawer();
      }

      return {
        loading,
        getTitle,
        registerDrawer,
        handleClose,
        rawData,
        getWidth,
        changeLoading,
        closeDrawer,
      };
    },
  });
</script>
